<template>
  <fl-navBar
    dark
    :border="false"
    title="应用中心"
    color="#333333"
    :fixed="true"
    background-color="#fff"
    status-bar
  />
  <view class="appCenter">
    <view class="app_container">
      <view class="app_title">办公系统</view>
      <view class="app_content">
        <view class="app_item" @click="handleNavigator('/pages/outReport/index')">
          <img src="@/static/images/app_center/bgxt.png" alt="" />
          <text>外出报备</text>
        </view>
        <view class="app_item"  @click="handleNavigator('/pages/carRegistration/index')">
          <img src="@/static/images/app_center/bgxt.png" alt="" />
          <text>车辆登记</text>
        </view>
        <view class="app_item"  @click="handleNavigator('/pages/room/index')">
          <img src="@/static/images/app_center/bgxt.png" alt="" />
          <text>会议室预定</text>
        </view>
        <view class="app_item"  @click="handleNavigator('/pages/surveyEvaluation/quesFilling')">
          <img src="@/static/images/app_center/bgxt.png" alt="" />
          <text>调查评测</text>
        </view>
      </view>
    </view>
    <view class="app_container">
      <view class="app_title">教务系统</view>
      <view class="app_content">
        <view class="app_item" @click="handleNavigator('/pages/achievementType/index')">
          <img src="@/static/images/app_center/cjcx.png" alt="" />
          <text>成绩查询</text>
        </view>
        <view class="app_item" @click="handleNavigator('/pages/supervision/index')">
          <img src="@/static/images/app_center/ddxs.png" alt="" />
          <text>督导巡视</text>
        </view>
        <view class="app_item" @click="handleNavigator('/pages/courseEvaluate/index')">
          <img src="@/static/images/app_center/tkpj.png" alt="" />
          <text>听课评价</text>
        </view>
        <view class="app_item"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

function handleNavigator(url) {
  uni.navigateTo({ url: url });
}
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;

  .appCenter {
    height: 100%;
    background-color: #ffffff;
    color: #000000;
    .app_container {
      margin-bottom: 30px;
    }

    .app_title {
      font-size: 16px;
      font-weight: 700;
      font-size: 30rpx;
      padding-left: 20px;
      margin: 20px 0 15px 0;
    }

    .app_content {
      display: flex;

      .app_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        img {
          width: 82rpx;
          height: 82rpx;
        }
        text {
          font-size: 28rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
